<template id="box">
  <div class="productClassify">
    <div class="box">
      <div class="box1">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-form-item label="属性名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>

           <el-form-item label="商品类型" >
              <el-select v-model="value"      placeholder="请选择" @change="cha(value)"   >
              <el-option
                v-for="item in ruleForm.options"
                :key="item.id"
                :label="item.name"
                :value="item.name"
               >
              </el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="分类赛选样式" prop="resource">
            <el-radio-group v-model="ruleForm.resource">
              <el-radio label="普通"></el-radio>
              <el-radio label="颜色"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="能否进行检索" prop="resource">
            <el-radio-group v-model="ruleForm.resourcee">
              <el-radio label="不需要检索"></el-radio>
              <el-radio label="关键字检索"></el-radio>
              <el-radio label="范围检索"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="商品属性关联" prop="resourcee">
            <el-radio-group v-model="ruleForm.resourceee">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="商品是否可选" prop="resourceeee">
            <el-radio-group   v-model="ruleForm.resourceeee"   @change="chaes(value)" >
              <el-radio  label="0">唯一</el-radio>
              <el-radio  label="1">单一</el-radio>
              <el-radio   label="2">复选</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="属性值的录入方式" prop="resourceeeee" >
            <el-radio-group   v-model="ruleForm.resourceeeee"   @change="chae(value)" >
              <el-radio label="1">手工录入</el-radio>
              <el-radio label="0">从下面列表中选择</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="属性值可选列表" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
          </el-form-item>

          <el-form-item label="是否支持手动新增" prop="resources">
            <el-radio-group v-model="ruleForm.resources">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
            </el-radio-group>
          </el-form-item>


          <el-form-item label="排序属性" prop="resourc" >
            <el-input v-model="ruleForm.resourc"></el-input>
          </el-form-item>




          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>

          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    let that= this
    this.ruleForm.name = this.$route.params.shuxing;
    this.ruleForm.region = this.$route.params.shangpin;
    this.ruleForm.resourc = this.$route.params.sort;
    this.ruleForm.desc = this.$route.params.inputList;
    this.type=this.$route.params.type
    this.value = this.$route.params.shangpin;
    this.id = this.$route.params.id;
    this.tiao = this.$route.params.tiao;
    // console.log(this.tiao );


    if(this.$route.params.selectType==0){
      this.ruleForm.resourceeee='0'
    }
    else if(this.$route.params.selectType==1){
       this.ruleForm.resourceeee='1'
    }else{
       this.ruleForm.resourceeee='2'
    }
if(this.$route.params.inputType==0){
  this.ruleForm.resourceeeee='1'
}else{
   this.ruleForm.resourceeeee='0'
}





    


     this.$axios
      .get("/productAttribute/category/list/withAttr", {
        params: {
  
        },
      })
      .then(function (response) {
        that.ruleForm.options = response.data.data
      // console.log(that.tableData);
   
      })
      .catch(function (error) {
    
      });





  },

  data() {
    return {
      tiao:"",
      ids:'',
      id: "",
      value:'',
      ruleForm: {
         options: [],
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resourc: "",
        desc: "",

        resource: "普通",
        resourcee: "不需要检索",
        resourceee: "是",
        resourceeee: "",
        resourceeeee:"" ,
        resources: "是",
      },

      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],

        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],

        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },

    };
  },
  methods: {
 







    fn() {
      let that = this
    
      // console.log(this.type);
       this.$router.push("/productType"
       
       
      //  {
      //      name:that.tiao,
      //       params:{

      //       names:this.value,
      //       num:this.id,
      //       type:this.type,
      //       productAttributeCategoryId:this.id,
           
           
      //       }  
      //     }
          )
          

          },











    //创建


  chaes(){
// console.log(this.ruleForm.resourceeee);

  },
  chae(){
// console.log(this.ruleForm.resourceeeee);

  },



    submitForm(formName){


      this.$refs[formName].validate((valid) => {
        if (valid) {
          let that = this;
          this.$confirm("是否提交数据?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",

          }).then(() => {
              console.log(this.ruleForm.resourceeee);
               that.$axios.post("/productAttribute/update/"+this.id ,
                {   
                  name: this.ruleForm.name, 
                  region: this.ruleForm.region,
                  sort: this.ruleForm.resourc,
                  inputList: this.ruleForm.desc ,
                  productAttributeCategoryId:this.ids,
                  selectType:this.ruleForm.resourceeee,
                  inputTpye:this.ruleForm.resourceeeee
                   
                });
                
        that.fn()
                
              this.$message({
                type: "success",
                message: "提交成功!",
              });  
              
              


         
            }).catch(() => {
              this.$message({
                type: "info",
                message: "已取消112",
              });
            });

        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.el-form-item__label {
  width: 6.25rem;
}

.productClassify {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.box {
  width: 60%;
  border: 1px solid #ebeef5;
  border-radius: 2px;
}
.box1 {
  padding: 3.125rem;
  width: 90%;
}
</style>